<!--
 * @Author: dfh
 * @Date: 2024-03-19 17:23:28
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container">
        <!-- -->
        <swiper class="swiper" circular autoplay>
            <swiper-item v-for="(item, index) in data" :key="index" @click="toArticleDetailHandle(item)">
                <view class="swiper-item">
                    <image :src="item.cover" mode="aspectFill" style="width:100%" />
                    <!-- <image src="@/static/banner_bg.png" mode="aspectFill" style="width:100%" v-else /> -->
                    <text class="title-wrap">
                        {{ item.title }}
                    </text>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup>
defineProps({
    data: {
        type: Array,
        default: () => []
    },
    bankList:{
        type: Array,
        default: () => []
    },
})

const toArticleDetailHandle = (item) => {
    uni.navigateTo({ url: `/pages/article/index?createdTime=${item.createdTime}&title=${item.title}&content=${item.content}` })
}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 100%;
    height: 400rpx;
    box-sizing: border-box;
    overflow: hidden;

    .swiper {
        width: 100%;
        height: 100%;

        .swiper-item {
            width: 100%;
            height: 100%;

            .title-wrap {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                background-color: rgba(0, 0, 0, .5);
                padding: 10rpx;
                box-sizing: border-box;
                font-size: 28rpx;
                color: rgba(255, 255, 255, .6);
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                /* display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;

                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical; */
            }
        }
    }


}
</style>